<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>账户管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的资料</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 表头 -->
      <div class="clearfix title">
        <span class="title-text">我的资料</span>
      </div>

      <div class="btns">
        <el-button type="success" @click="dialogVisible = true" size="big"
          >添加地址</el-button
        >

        <!-- 表单 -->
        <el-dialog
          title="添加地址"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <!-- <span>这是一段信息</span> -->
          <el-form ref="userInfoRef" v-model="userInfoForm" label-width="100px">
            <el-form-item label="收货人姓名">
              <el-input v-model="userInfoForm.recipientsName"></el-input>
            </el-form-item>

            <el-form-item label="收货人电话">
              <el-input v-model="userInfoForm.recipientsTel"></el-input>
            </el-form-item>

            <el-form-item label="所 在 省 市">
              <el-cascader
                size="large"
                :options="options"
                v-model="userInfoForm.recipientsLocation"
              >
              </el-cascader>
            </el-form-item>

            <el-form-item label="街 道 地 址">
              <el-input v-model="userInfoForm.recipientsAddress"></el-input>
            </el-form-item>

            <el-form-item label="备 注">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="userInfoForm.recipientsComment"
              >
              </el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUserInfo">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 设置地址列表 -->
      <el-table :data="userAddresses" style="width: 100%">
        <el-table-column label="收货人姓名" width="100">
          <template slot-scope="scope">
            <el-tag style="margin-left: 10px">{{
              scope.row.recipientsName
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="收货人电话" width="140">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              {{ scope.row.recipientsTel }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="收货人地址" width="380">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{
                scope.row.recipientsLocation + scope.row.recipientsAddress
              }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="备注信息" width="380">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <span size="medium">{{ scope.row.recipientsComment }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini" type="danger" @click="open(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 请求网络
import { getAllAddress } from "network/address";
// 引入三级联动地址
import { regionData } from "element-china-area-data";

export default {
  name: "MyInformation",
  data() {
    return {
      // 新增地址是否打开
      dialogVisible: false,

      // 收货表单
      userAddresses: [
        {
          addressId: 1,
          userIdTel: "13645225601",
          recipientsLocation: "江苏徐州泉山区和平街道",
          recipientsTel: "13645225600",
          recipientsName: "leilei",
          recipientsAddress: "minkangyuan",
          recipientsComment: "AAA",
        },
        {
          addressId: 2,
          userIdTel: "13645225601",
          recipientsLocation: "江苏徐州泉山区和平街道",
          recipientsTel: "13645225600",
          recipientsName: "leilei",
          recipientsAddress: "minkangyuan",
          recipientsComment: "AAA",
        },
        {
          addressId: 3,
          userIdTel: "13645225601",
          recipientsLocation: "江苏省/徐州市/泉山区",
          recipientsTel: "13645225600",
          recipientsName: "雷雷1",
          recipientsAddress: "民康园1",
          recipientsComment: "无备注1",
        },
      ],

      // 修改资料的表单
      userInfoForm: {
        // 收件人姓名
        recipientsName: "",
        // 收件人电话
        recipientsTel: "",
        // 省市地址
        recipientsLocation: "",
        // 详细地址
        recipientsAddress: "",
        // 备注
        recipientsComment: "",
      },

      // 三级联动
      options: regionData,
    };
  },

  methods: {
    // 保存用户资料
    updateUserInfo() {
      alert("保存用户资料");
      this.dialogVisible = false;
    },

    // 删除用户地址
    open(index) {
      this.$confirm("此操作将永久删除地址, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          // 做删除接口
          // 先拿到收获的地址id
          this.userAddresses[index].addressId;
          // 网络请求删除地址
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //关闭增加用户地址的弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 取消保存用户信息
    cancelUserInfo() {
      this.$confirm("是否取消修改资料信息", "取消", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        //点击确认返回到首页
        .then(() => {
          this.$router.push("/userwelcome");
        })
        // 取消操作，不做任何处理
        .catch(() => {});
    },
  },
  created() {
    let addressSee = new FormData();
    addressSee.append("userIdTel", this.$store.state.UserTelId);
    // 获取用户的收货地址
    getAllAddress(addressSee).then(res=>{
      for (let i = 0; i < res.data.length; i++) {
        // 将接口拿到的数据拷贝到card数组中
        // this.card.push(res.data[i]);
        this.userAddresses[i].addressId = res.data.data.addressId;
        this.userAddresses[i].userIdTel = res.data.data.userIdTel;
        this.userAddresses[i].recipientsLocation = res.data.data.recipientsLocation;
        this.userAddresses[i].recipientsTel = res.data.data.recipientsTel;
        this.userAddresses[i].recipientsName = res.data.data.recipientsName;
        this.userAddresses[i].recipientsAddress = res.data.data.recipientsAddress;
        this.userAddresses[i].recipientsComment = res.data.data.recipientsComment;
      }
    })
  },
};
</script>

<style lang="less" scoped>
.btn {
  position: absolute;
  left: 300px;
}
.box-card {
  .title {
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .title-text {
    font-size: larger;
    font-weight: bolder;
    display: block;
  }

  .el-form-item {
    margin-left: 15%;
    margin-right: 15%;
    .el-date-picker,
    .el-cascader,
    .el-inout {
      width: 100%;
    }
  }

  .el-row {
    margin-bottom: 30px;
    .text-item {
      display: block;
      font-size: 15px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .line-main {
      margin: 10rpx 0;
      background: #fff;
      text-align: center;
      height: 100px;
      padding: 0 30px;
      line-height: 100px;
    }
    .line:before {
      content: "";
      display: block;
      height: 1px;
      width: 100%;
      background-color: #ccc; /*颜色需与主题大背景色一致*/
      position: relative;
      top: 50px; /*调节线高*/
      left: 0;
    }
    .line-text {
      display: inline-block;
      background: #fff;
      padding: 0 36px 0 36px;
      position: relative;
      font-weight: 500;
      color: grey;
    }
  }
}
</style>